<template>
	<view id="app">
		<view :class="searchBarFixed == false ? 'header' : 'header headerFixed'">
			<view class="setUp">
				<image src="@/static/img/homePage/news@2x.png" @click="notice"></image>
				<image src="@/static/img/homePage/setting@2x.png" @click="setUp"></image>
			</view>
			
			<view class="means">
				<!-- url="/pages/theHead/editAccountInformation/editAccountInformation" -->
				<navigator :url="'/pages/theHead/changeAvatar/index?headPortrait='+ userInfo.avatarAddress" class="headPortrait">
					<image :src="userInfo && userInfo.avatarAddress ? userInfo.avatarAddress :'../../static/img/index/defaultTx.png'"></image>
					<!-- <view>编辑</view> -->
				</navigator>
				<view class="meansDetail">
					<view>{{userInfo && userInfo.nickName ? userInfo.nickName : ''}}</view>
					<view>
						<text>健管师</text>：
						<text v-if="userInfo && userInfo.healthId">{{userInfo && userInfo.healthName}}</text>
						<text>({{userInfo && userInfo.appellations || '未填写'}})</text>
						<navigator :url="encodeURI('/pages/theHead/selectHealth/selectHealth?name='+ (userInfo && userInfo.healthName))">{{userInfo && userInfo.healthId?'更换':'选择'}}</navigator>
					</view>
					<view>
						<text>专家</text>：
						<text v-if="userInfo && userInfo.expertList">{{userInfo && userInfo.expertList[0].expertName}}</text>
						<text v-if="userInfo && userInfo.expertList">({{userInfo && userInfo.expertList[0].appellations || '未填写'}})</text>
						<image  v-if="userInfo && userInfo.expertList && userInfo.expertList.length > 1" src="@/static/img/homePage/more@2x.png" @click="expertClick"></image>
					</view>
				</view>
			</view>
			
			<view class="serviceModular">
				<navigator  url="/pages/healthTeam/index"><image src="@/static/img/homePage/team@2x.png"></image>服务团队</navigator>
				<text></text>
				<navigator class="message" url="/pages/index/consult">
					<image src="@/static/img/homePage/consult@2x.png"></image>健康咨询
					<view class="messageTotal"  v-if="totalUnreadCount>0">{{totalUnreadCount}}</view>
				</navigator>
			</view>
		</view>
		
		<view class="mainContent">
			<view class="material">
				<view class="basicFunctionTitle">
					<image src="../../static/img/index/tips@2x.png"></image>
					<text>健管资料</text>
				</view>
				<view class="basicFunctionBox">
					<navigator url="/pages/monitor/information/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/information@2x.png"></image>
						<text>基本资料</text>
					</navigator>
					<navigator url="/pages/monitor/medicalReport/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/physicalExamination@2x.png"></image>
						<text>体检报告</text>
					</navigator>
					<navigator url="/pages/monitor/dailyMonitoring/healthMonitoring" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/everyDay@2x.png"></image>
						<text>日常监测</text>
					</navigator>
					<navigator url="/pages/monitor/medicalRecord/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/doctor@2x.png"></image>
						<text>就医记录</text>
					</navigator>
					<navigator url="/pages/monitor/medication/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/pharmacy@2x.png"></image>
						<text>用药记录</text>
					</navigator>
				</view>
			</view>
			
			<view class="material">
				<view class="basicFunctionTitle">
					<image src="../../static/img/index/tips@2x.png"></image>
					<text>健管服务</text>
				</view>
				<view class="basicFunctionBox">
					<navigator url="/pages/healthStatus/navigation" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/statusAssessment@2x.png"></image>
						<text>健康现状<br>评估</text>
					</navigator>
					<navigator url="/pages/currentSummary/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/statusSummary@2x.png"></image>
						<text>健康现状<br>汇总</text>
					</navigator>
					<navigator url="/pages/futureDiseases/navigation" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/futureStatus@2x.png"></image>
						<text>疾病风险<br>评估</text>
					</navigator>
					<navigator url="/pages/futureSummary/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/futureSummary@2x.png"></image>
						<text>疾病风险<br>汇总</text>
					</navigator>
					<navigator url="/pages/monitor/intervention/interventionlist" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/intervene@2x.png"></image>
						<text>干预方案</text>
					</navigator>
					<navigator url="/pages/monitor/interventionPlan/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/plan@2x.png"></image>
						<text>干预计划</text>
					</navigator>
					<navigator url="/pages/monitor/follow/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/follow@2x.png"></image>
						<text>随访记录</text>
					</navigator>
					<navigator url="/pages/monitor/referral/list" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/referral@2x.png"></image>
						<text>转诊记录</text>
					</navigator>
					<navigator url="/pages/monitor/article/articlelist" class="basicFunctionItem evenBasicFunction">
						<image src="@/static/img/homePage/popularScience@2x.png"></image>
						<text>健康科普</text>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 专家弹出框 -->
		<view class="popHide" v-if="expertShow"></view>
		<view class="contentBox" v-if="expertShow">
			<image src="../../static/img/theHead/expertsLook@2x.png" alt="" class="imageExperts">
			<view class="expertsList">
				<nav><span>专家</span><span class="cw">称谓</span></nav>
				<nav v-for="(item,index) in userInfo && userInfo.expertList"><span>{{item.expertName || '未填写'}}</span><span>{{item.appellations || '未填写'}}</span></nav>
			</view>
			<image src="../../static/img/theHead/delHui@2x.png" alt="" class="del" @click="expertShow = false">
		</view>
	</view>
</template>

<script>
	import { distance } from '@/static/js/filter.js'
	export default {
		data () {
			return {
				userInfo: {},
				expertShow: false,
				totalUnreadCount:0,
				searchBarFixed: false
			}
		},
		methods:{
			distance,
			setUp() {
				uni.navigateTo({
					url:'/pages/theHead/setUp/setUp'
				})
			},
			expertClick() {
				this.expertShow = true;
			},
			notice() {
				uni.navigateTo({
					url:'/pages/index/notice'
				})
			}
		},
		onPageScroll() {
			this.searchBarFixed = this.distance('header');
		},
		onShow() {
			const _this = this;
			if (!localStorage.token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}else{
				_this.$api.getUserInfo().then((res) => {
					_this.userInfo = res.data.result;
					localStorage.setItem('userInfo',JSON.stringify(res.data.result))
				})
			}
			setTimeout(()=>{
				const _this = this;
				_this.context = uni.createInnerAudioContext();
				_this.context.src = '/static/dingdong.mp3';
				_this.$im.Conversation.getTotalUnreadCount().then(function(totalUnreadCount) {
				  _this.totalUnreadCount = totalUnreadCount
				  if(totalUnreadCount > 0){
					  _this.context.play()
				  }
				});
				_this.$im.watch({
					message: function(event){
						_this.$im.Conversation.getTotalUnreadCount().then(function(totalUnreadCount) {
							console.log(totalUnreadCount)
						  _this.totalUnreadCount = totalUnreadCount
						});
						var message = event.message;
						if(!message.content.content){
							// 已读通知return
							return;
						}
						_this.$im.Conversation.getList({count: 30}).then(function(conversationList) {
						   const nowUser = conversationList.filter(a=>{
							   return a.targetId == message.senderUserId
						   })
						   if(nowUser[0].notificationStatus != 2){
							   return;
						   }
						   _this.context.play()
						});
					},
					status: function(event){
						var status = event.status;
					}
				})
				_this.$im.Conversation.getTotalUnreadCount().then(function(totalUnreadCount) {
				  _this.totalUnreadCount = totalUnreadCount
				});
			},800)
		},
	}
</script>

<style lang="scss" scoped>
	#app {
		min-height: calc(100vh - 44px);
		width: 750upx;
		background-color: #F8F8F8;
		padding-bottom: 53upx;
		.header,.headerFixed {
			background: url(@/static/img/homePage/background@2x.png) no-repeat;
			background-size: 100% 100%;
			width: 100%;
			height: 456upx;
			padding: 23upx 24upx 0;
			box-sizing: border-box;		
			margin: 0 auto;
			position: fixed;
			top: 44px;
			z-index: 100;
			.setUp {
				margin: 0 36upx 29upx 0;
				display: flex;
				position: absolute;
				right: 0;
				image {
					width: 36upx;
					height: 36upx;
				}
				image:nth-child(1) {
					margin-right: 39upx;
				}
			}
			.means {
				display: flex;
				margin-top: 66upx;			
				.headPortrait {
					border: 4upx solid rgba(255, 255, 255, 0.3);
					box-sizing: border-box;
					border-radius: 20upx;
					width: 120upx;
					height: 120upx;
					position: relative;
					image {
						width: 100%;
						height: 100%;
						border-radius: 20upx;
					}
					view {
						position: absolute;
						bottom: 0;
						height: 26upx;
						background-color: #000000;
						opacity: .3;
						width: 100%;
						border-radius: 0px 0px 20upx 20upx;
						color: #FFFFFF;
						font-size: 22upx;
						text-align: center;
						line-height: 26upx;
					}
				}
				.meansDetail {
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					flex: 1;
					margin-left: 36upx;
					view:nth-child(1) {
						color: #FFFFFF;
						font-size: 34upx;
						font-weight: bold;
						line-height: 36upx;
						margin-bottom: 10upx;
					}
					view:nth-child(2),view:nth-child(3) {
						line-height: 44upx;
						color: #FFFFFF;
						letter-spacing: 0.12em;
						display: flex;
						align-items: center;
						text:nth-child(1) {
							text-align-last:justify;				
							text-align:justify;				
							text-justify:distribute-all-lines; 
							width: 96upx;
						}
						text:nth-child(2) {
							font-size: 28upx;
							max-width: 210upx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
						text:nth-child(3) {
							font-size: 22upx;
							margin-right: 10upx;
							max-width: 210upx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
						}
						// image {
							
						// 	position: absolute;
						// 	right: 24upx;
						// 	top: 50%;
						// 	transform: translateY(-50%);
						// }
						navigator {
							color: #FFCF11;
							font-size: 24upx;
						}
						image {
							width: 26upx;
							height: 6upx;
						}
					}
				}
			}
			.serviceModular {
				margin-top: 46upx;
				width: 702upx;
				height: 154upx;
				background: #FFFFFF;
				border-radius: 12upx;
				display: flex;
				align-items: center;
				navigator {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					image {
						width: 130upx;
						height: 130upx;
					}
				}
				.message {
					position: relative;
					.messageTotal {
						position: absolute;
						width: 30upx;
						height: 30upx;
						font-size: 24upx;
						background: #f00;
						border-radius:30upx;
						text-align: center;
						line-height: 30upx;
						color: #fff;
						font-style: normal;
						top: 0;
						right: 26upx;
					}
				}
				text {
					width: 1upx;
					height: 46upx;
					background: #E6E6E6;
				}
			}
		}
		.headerFixed {
			background-color: #3ECBC0;
		}
		.mainContent {
			width: 702upx;
			margin: 0 auto;
			padding-top: 446upx;
			.material {
				width: 702upx;
				background: #FFFFFF;
				border-radius: 12upx;
				padding: 30upx 0 40upx;
				margin-bottom: 24upx;
				.basicFunctionTitle {
					padding:0 16upx 0;
					image {
						width: 8upx;
						height: 24upx;
						margin-right: 15upx;
					}
					text {
						color: #333333;
						font-size: 34upx;
						font-weight: bold;
					}
				}
				.basicFunctionBox {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					.basicFunctionItem {
						width: 25%;
						text-align: center;
						margin-top: 40upx;
						height: 158upx;
						image {
							width: 50upx;
							height: 50upx;
						}
						text {
							display: block;
							margin-top: 15upx;
							color: #333333;
							font-size: 28upx;
						}
					}
					.evenBasicFunction {
						height: 100%;
					}
				}
			}
			.material:last-child{
				margin-bottom: 0;
			}
		}
		.popHide {
			position: fixed;
			top: 0;left: 0;
			z-index: 100;
			background-color: #000000;
			opacity: .7;height: 100%;
			width: 100%;
		}
		.contentBox {
			position: fixed;
			top: 53%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: 100;
			width: 488upx;
			.imageExperts {
				width: 488upx;
				height: 255upx;
			}
			.expertsList {
				border-bottom-right-radius: 20upx;
				border-bottom-left-radius: 20upx;
				background-color: #FFFFFF;
				width: 100%;
				margin-top:-20upx;
				padding: 19upx 62upx 23upx;
				box-sizing: border-box;
			}
			.expertsList nav:nth-child(1){
				font-weight: bold;
				font-size: 28upx;
				border-bottom: 1upx solid #F0F0F0;
			}
			.expertsList nav{display: flex;color: #247474; font-size: 26upx;height: 68upx; align-items: center;}
			.expertsList nav span:nth-child(odd) {width: 100px;}
			.expertsList nav span:nth-child(even) {flex: 1;}
			.expertsList nav .cw{padding-left: 24px;}
			.del {
				width: 42upx;
				height: 42upx;
				display: block;
				margin: 97upx auto 0;
			}
		}
	}
</style>
